<template>
  <div id="app" class="takeaway-page">
    <!-- 头部区域 -->
    <header class="page-header">
      <div class="back-btn" @click="handleBack">
        <i class="iconfont icon-back" @click="goBack">&#xe60b;</i>
      </div>
      <div class="search-wrap">
        <input 
          v-model="searchVal" 
          type="text" 
          placeholder="窑鸡王" 
          class="search-input"
        />
      </div>
      <div class="switch-address" @click="handleSwitchAddress">
        切换地址
      </div>
    </header>

    <!-- 轮播图区域，根据排序状态控制显示与动画 -->
    <div 
      class="banner-container" 
      v-show="!isSorting && !hasSorted"
      :class="{ 'fade-out': isSorting }"
    >
      <div 
        class="banner-list" 
        :style="{ transform: `translateX(-${currentBannerIndex * 100}%)` }"
      >
        <div 
          class="banner-item" 
          v-for="(item, idx) in bannerList" 
          :key="idx"
        >
          <img :src="item.image" alt="banner" class="banner-img" />
          <div class="live-tag" v-if="item.isLive">直播中</div>
          <div class="banner-desc">
            <p class="desc-title">{{ item.title }}</p>
            <p class="desc-sub">
              配送约{{ item.deliveryFee }}元 · {{ item.distance }}km · {{ item.duration }}分钟 · 月售{{ item.monthSales }}
            </p>
            <p class="desc-price">
              ¥{{ item.price }} 劲省{{ item.saveMoney }}元 ¥{{ item.originalPrice }}
            </p>
            <button class="grab-btn">抢</button>
          </div>
        </div>
      </div>
      
      <!-- 新增：轮播图导航指示器 -->
      <div class="banner-indicators">
        <span 
          v-for="(item, idx) in bannerList" 
          :key="idx" 
          class="indicator"
          :class="{ active: currentBannerIndex === idx }"
          @click="switchBanner(idx)"
        ></span>
      </div>
    </div>

    <!-- 加载提示，排序时显示，居中显示不遮盖页面 -->
    <div class="loading-tip" v-show="isSorting">
      <div class="loading-content">
        <img src="https://s1.chu0.com/src/img/gif/0b/0ba928a5dd454cdd937807d2981725d2.gif?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:if9O14UxKtoZcAl-PQpvKosn_AM=" alt="loading" class="loading-img" />
      </div>
    </div>

    <!-- 排序栏区域 -->
    <div class="sort-bar" :class="{ 'sticky-top': hasSorted }">
      <div 
        class="sort-item dropdown" 
        :class="{ active: currentSort === 'comprehensive' }"
        @click="toggleDropdown"
      >
        综合排序
        <i class="dropdown-icon">▼</i>
        <div 
          class="dropdown-menu" 
          v-show="isDropdownOpen"
          @click.stop
        >
          <div 
            class="dropdown-item" 
            v-for="(option, idx) in comprehensiveOptions" 
            :key="idx"
            :class="{ active: currentComprehensiveOption === option.value }"
            @click="selectComprehensiveOption(option)"
          >
            {{ option.label }}
          </div>
        </div>
      </div>
      <div 
        class="sort-item" 
        :class="{ active: currentSort === 'sales', refreshing: isSalesRefreshing }"
        @click="sortBySales"
      >
        销量优先
      </div>
      <div 
        class="sort-item" 
        :class="{ active: currentSort === 'speed', refreshing: isSpeedRefreshing }"
        @click="sortBySpeed"
      >
        速度优先
      </div>
    </div>

    <!-- 商家列表区域，排序时上移占据轮播图位置 -->
    <div class="merchant-list" :style="{ paddingTop: hasSorted ? '35px' : '0' }" @click="searchSearch">
      <div 
        class="merchant-card" 
        v-for="(merchant, idx) in filteredMerchants" 
        :key="idx"
        :class="{ 'fade-in': !isSorting && !hasSorted }"
      >
        <div class="tag" v-if="merchant.tag">{{ merchant.tag }}</div>
        <div class="merchant-info">
          <div class="merchant-left">
            <img :src="merchant.logo" alt="logo" class="merchant-logo" />
          </div>
          <div class="merchant-right">
            <div class="merchant-name-rating">
              <span class="name">{{ merchant.name }}</span>
              <span class="rating">{{ merchant.rating }}分</span>
            </div>
            <div class="merchant-sales">
              月售{{ merchant.monthSales }}+ · 起送¥{{ merchant.minOrder }} · 配送约{{ merchant.deliveryFee }}元 · {{ merchant.duration }}分钟 · {{ merchant.distance }}km
            </div>
            <div class="merchant-tags">
              <span 
                class="tag-item" 
                v-for="(tag, tIdx) in merchant.tags" 
                :key="tIdx"
              >
                {{ tag }}
              </span>
            </div>
          </div>
        </div>
        <div class="goods-list">
          <div 
            class="goods-item" 
            v-for="(goods, gIdx) in merchant.goods" 
            :key="gIdx"
          >
            <img :src="goods.image" alt="goods" class="goods-img" />
            <div class="goods-name">{{ goods.name }}</div>
            <div class="goods-price">
              ¥{{ goods.price }} 
              <span class="discount" v-if="goods.discount">{{ goods.discount }}</span>
            </div>
          </div>
          
          <div class="more-item" id="moreBtn">
              <span>查看更多</span>
              <span class="more-icon">>></span>
            </div>
         </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from '@/router';
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
// 状态管理
const searchVal = ref('');
const currentSort = ref('comprehensive');
const currentComprehensiveOption = ref('distance');
const currentBannerIndex = ref(0);
const isDropdownOpen = ref(false);
const isSorting = ref(false);
const isSalesRefreshing = ref(false);
const isSpeedRefreshing = ref(false);
const hasSorted = ref(false); // 新增：记录是否已排序
let bannerTimer = null;
const searchQuery = ref('');
const currentPlaceholder = ref('');

// 模拟数据
const bannerList = ref([
  {
    image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.i7-b1zbKtlfmluvh4bzyuwHaFq?w=282&h=211&c=8&rs=1&qlt=90&o=6&dpr=3&pid=3.1&rm=2',
    isLive: true,
    title: '[减脂]窑鸡（半只）+小吃3选1...',
    deliveryFee: 1.8,
    distance: 2.8,
    duration: 48,
    monthSales: 49,
    price: 39.9,
    saveMoney: 25.8,
    originalPrice: 65.7
  },
  {
    image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.1MzvspVGWVlFHc4Yjap8LAHaE7?w=265&h=211&c=8&rs=1&qlt=90&o=6&dpr=2.8&pid=3.1&rm=2',
    isLive: false,
    title: '新店特惠套餐',
    deliveryFee: 0,
    distance: 3.2,
    duration: 55,
    monthSales: 32,
    price: 29.9,
    saveMoney: 20,
    originalPrice: 49.9
  },
  {
    image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.0CkgzjY0Vu6l60MQSvxvHAHaKa?w=155&h=211&c=8&rs=1&qlt=90&o=6&dpr=2.8&pid=3.1&rm=2',
    isLive: true,
    title: '招牌窑鸡双人套餐',
    deliveryFee: 2.5,
    distance: 1.9,
    duration: 38,
    monthSales: 67,
    price: 89.9,
    saveMoney: 35,
    originalPrice: 124.9
  },
  {
    image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.j1CojaQt58JGmHXEFQzNGQHaHJ?w=201&h=211&c=8&rs=1&qlt=90&o=6&dpr=3&pid=3.1&rm=2',
    isLive: false,
    title: '深夜食堂特惠',
    deliveryFee: 1.5,
    distance: 4.1,
    duration: 52,
    monthSales: 28,
    price: 45.9,
    saveMoney: 18,
    originalPrice: 63.9
  },
  {
    image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.AKk9axPiNxXSCQGmbjpSWgHaF1?w=247&h=211&c=8&rs=1&qlt=90&o=6&dpr=3&pid=3.1&rm=2',
    isLive: true,
    title: '新用户专享优惠',
    deliveryFee: 0,
    distance: 2.3,
    duration: 40,
    monthSales: 85,
    price: 35.9,
    saveMoney: 25,
    originalPrice: 60.9
  },
  {
    image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C._qwYF33fHSKfkBX6HsAvUAHaJI?w=160&h=211&c=8&rs=1&qlt=90&o=6&dpr=3&pid=3.1&rm=2',
    isLive: false,
    title: '会员日满减活动',
    deliveryFee: 2,
    distance: 3.7,
    duration: 45,
    monthSales: 53,
    price: 59.9,
    saveMoney: 22,
    originalPrice: 81.9
  },
  {
    image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.2IicObd5IXghPeIu-lzmvwHaF1?w=274&h=211&c=8&rs=1&qlt=90&o=6&dpr=3&pid=3.1&rm=2',
    isLive: true,
    title: '午间工作餐特惠',
    deliveryFee: 1.2,
    distance: 1.5,
    duration: 30,
    monthSales: 120,
    price: 29.9,
    saveMoney: 15,
    originalPrice: 44.9
  },
  {
    image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.l5XJY-1rMmONspbNDphMmgHaHh?w=192&h=211&c=8&rs=1&qlt=90&o=6&dpr=3&pid=3.1&rm=2',
    isLive: false,
    title: '周末家庭套餐',
    deliveryFee: 3,
    distance: 4.5,
    duration: 58,
    monthSales: 36,
    price: 129.9,
    saveMoney: 40,
    originalPrice: 169.9
  }
]);

const comprehensiveOptions = ref([
  { value: 'distance', label: '距离优先' },
  { value: 'minPrice', label: '起送价优先' },
  { value: 'deliveryFee', label: '配送费优先' },
  { value: 'highPrice', label: '人均高到低' },
  { value: 'lowPrice', label: '人均低到高' }
]);

const merchantData = ref([
  {
    tag: '优选',
    logo: 'https://p0.meituan.net/waimaipoi/629c9e94550bb6ae78c6fcdc610a7196192325.jpg@212w',
    name: '窑鸡王（泸州万象汇店）',
    rating: 4.9,
    monthSales: 1200,
    minOrder: 20,
    deliveryFee: 5,
    duration: 35,
    distance: 2.5,
    avgPrice: 65,
    tags: ['明厨亮灶', '神券', '已膨胀至7', '99减3', '新客减1', '1.81折起'],
    goods: [
      {
        image: 'https://p0.meituan.net/wmproduct/bbb21b29989a39e7d124ad5bacda57e1599644.jpg@360w_270h',
        name: '招牌窑鸡',
        price: 69.9,
        discount: '招牌'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/546ff1442b1b8edc2ab91567a9525778657262.jpg@360w_270h',
        name: '半只窑鸡',
        price: 39.9,
        discount: '热销'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/2de0a3fe33ef2142d83eb449f561bd68129449.jpg@360w_270h',
        name: '窑鸡饭',
        price: 25.9,
        discount: '套餐'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/2de0a3fe33ef2142d83eb449f561bd68129449.jpg@360w_270h',
        name: '秘制卤味',
        price: 19.9,
        discount: '特惠'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/4777732019d29fc186a70c2f8af83476129784.jpg@360w_270h',
        name: '窑鸡拼盘',
        price: 49.9,
        discount: '新品'
      }
    ]
  },
  {
    tag: '优选',
    logo: 'https://p0.meituan.net/waimaipoi/629c9e94550bb6ae78c6fcdc610a7196192325.jpg@212w',
    name: '窑鸡王（龙南路店）',
    rating: 4.8,
    monthSales: 800,
    minOrder: 15,
    deliveryFee: 3,
    duration: 45,
    distance: 3.8,
    avgPrice: 58,
    tags: ['堂食店', '神券', '已膨胀至7', '99减3', '新客减1', '1.81折起'],
    goods: [
      {
        image: 'https://p0.meituan.net/wmproduct/bbb21b29989a39e7d124ad5bacda57e1599644.jpg@360w_270h',
        name: '招牌窑鸡',
        price: 69.9,
        discount: '招牌'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bbb21b29989a39e7d124ad5bacda57e1599644.jpg@360w_270h',
        name: '半只窑鸡',
        price: 39.9,
        discount: '热销'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bbb21b29989a39e7d124ad5bacda57e1599644.jpg@360w_270h',
        name: '窑鸡饭',
        price: 25.9,
        discount: '套餐'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/e1027641b7dc41a84507912ba9f091c098749.jpg@360w_270h',
        name: '秘制卤味',
        price: 19.9,
        discount: '特惠'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '窑鸡拼盘',
        price: 49.9,
        discount: '新品'
      }
    ]
  },
  {
    tag: '新店',
    logo: 'https://p0.meituan.net/waimaipoi/629c9e94550bb6ae78c6fcdc610a7196192325.jpg@212w',
    name: '窑鸡王（二转盘店）',
    rating: 4.7,
    monthSales: 1500,
    minOrder: 25,
    deliveryFee: 4,
    duration: 28,
    distance: 1.9,
    avgPrice: 72,
    tags: ['鲜鸡现烤', '刚刚有用户看过', '最近24小时874人看过'],
    goods: [
      {
        image: 'https://p0.meituan.net/wmproduct/eda9f4f968ff8b1fb4b9c887083ea66c183905.jpg@360w_270h',
        name: '招牌窑鸡',
        price: 69.9,
        discount: '招牌'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/30b7715bcabe3e27aa4117286ac57323211840.jpg@360w_270h',
        name: '半只窑鸡',
        price: 39.9,
        discount: '热销'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/163506a182522489624bc5d63714abad232447.jpg@360w_270h',
        name: '窑鸡饭',
        price: 25.9,
        discount: '套餐'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '秘制卤味',
        price: 19.9,
        discount: '特惠'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/6abf48330143770348712bd61eddf2b7186119.jpg@360w_270h',
        name: '窑鸡拼盘',
        price: 49.9,
        discount: '新品'
      }
    ]
  },
  {
    tag: '优选',
    logo: 'https://p0.meituan.net/waimaipoi/629c9e94550bb6ae78c6fcdc610a7196192325.jpg@212w',
    name: '窑鸡王（万达广场店）',
    rating: 4.6,
    monthSales: 950,
    minOrder: 18,
    deliveryFee: 6,
    duration: 38,
    distance: 2.2,
    avgPrice: 52,
    tags: ['满减优惠', '限时折扣', '新店特惠'],
    goods: [
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '招牌窑鸡',
        price: 69.9,
        discount: '招牌'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/eda9f4f968ff8b1fb4b9c887083ea66c183905.jpg@360w_270h',
        name: '半只窑鸡',
        price: 39.9,
        discount: '热销'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/163506a182522489624bc5d63714abad232447.jpg@360w_270h',
        name: '窑鸡套餐',
        price: 79.9,
        discount: '套餐'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/1eaa9364d72f934e225231f439a10ae4129460.jpg@360w_270h',
        name: '窑鸡饭',
        price: 25.9,
        discount: '特惠'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bbb21b29989a39e7d124ad5bacda57e1599644.jpg@360w_270h',
        name: '秘制卤味',
        price: 19.9,
        discount: '新品'
      }
    ]
  },
  {
    tag: '新店',
    logo: 'https://p0.meituan.net/waimaipoi/629c9e94550bb6ae78c6fcdc610a7196192325.jpg@212w',
    name: '窑鸡王（高新区店）',
    rating: 4.5,
    monthSales: 600,
    minOrder: 12,
    deliveryFee: 2,
    duration: 42,
    distance: 3.1,
    avgPrice: 48,
    tags: ['新店开业', '满50减15', '免费饮料'],
    goods: [
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '招牌窑鸡',
        price: 69.9,
        discount: '招牌'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '半只窑鸡',
        price: 39.9,
        discount: '热销'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '窑鸡饭',
        price: 25.9,
        discount: '套餐'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '秘制卤味',
        price: 19.9,
        discount: '特惠'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '窑鸡拼盘',
        price: 49.9,
        discount: '新品'
      }
    ]
  },
  {
    tag: '热门',
    logo: 'https://p0.meituan.net/waimaipoi/629c9e94550bb6ae78c6fcdc610a7196192325.jpg@212w',
    name: '窑鸡王（江阳区店）',
    rating: 4.9,
    monthSales: 2000,
    minOrder: 22,
    deliveryFee: 5,
    duration: 30,
    distance: 1.7,
    avgPrice: 68,
    tags: ['明厨亮灶', '神券', '满100减30', '新客减10'],
    goods: [
      {
        image: 'https://p0.meituan.net/wmproduct/eda9f4f968ff8b1fb4b9c887083ea66c183905.jpg@360w_270h',
        name: '招牌窑鸡',
        price: 69.9,
        discount: '招牌'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/eda9f4f968ff8b1fb4b9c887083ea66c183905.jpg@360w_270h',
        name: '半只窑鸡',
        price: 39.9,
        discount: '热销'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/eda9f4f968ff8b1fb4b9c887083ea66c183905.jpg@360w_270h',
        name: '窑鸡套餐',
        price: 79.9,
        discount: '套餐'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '窑鸡饭',
        price: 25.9,
        discount: '特惠'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '秘制卤味',
        price: 19.9,
        discount: '新品'
      }
    ]
  },
  {
    tag: '优选',
    logo: 'https://p0.meituan.net/waimaipoi/629c9e94550bb6ae78c6fcdc610a7196192325.jpg@212w',
    name: '窑鸡王（龙马潭店）',
    rating: 4.7,
    monthSales: 1100,
    minOrder: 16,
    deliveryFee: 4,
    duration: 40,
    distance: 3.3,
    avgPrice: 55,
    tags: ['满减优惠', '深夜食堂', '准时达'],
    goods: [
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '招牌窑鸡',
        price: 69.9,
        discount: '招牌'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '半只窑鸡',
        price: 39.9,
        discount: '热销'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '窑鸡饭',
        price: 25.9,
        discount: '套餐'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '秘制卤味',
        price: 19.9,
        discount: '特惠'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '窑鸡拼盘',
        price: 49.9,
        discount: '新品'
      }
    ]
  },
  {
    tag: '新店',
    logo: 'https://p0.meituan.net/waimaipoi/629c9e94550bb6ae78c6fcdc610a7196192325.jpg@212w',
    name: '窑鸡王（纳溪区店）',
    rating: 4.6,
    monthSales: 450,
    minOrder: 14,
    deliveryFee: 3,
    duration: 45,
    distance: 3.9,
    avgPrice: 50,
    tags: ['新店开业', '首单立减20', '免费配送'],
    goods: [
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '招牌窑鸡',
        price: 69.9,
        discount: '招牌'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '半只窑鸡',
        price: 39.9,
        discount: '热销'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '窑鸡套餐',
        price: 79.9,
        discount: '套餐'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '窑鸡饭',
        price: 25.9,
        discount: '特惠'
      },
      {
        image: 'https://p0.meituan.net/wmproduct/bd45d744df6d6dac183cf48b174049c791874.jpg@360w_270h',
        name: '秘制卤味',
        price: 19.9,
        discount: '新品'
      }
    ]
  }
]);
// 轮播图逻辑
onMounted(() => {
  bannerTimer = setInterval(() => {
    currentBannerIndex.value = (currentBannerIndex.value + 1) % bannerList.value.length;
  }, 3000);
});

onUnmounted(() => {
  clearInterval(bannerTimer);
});

// 新增：轮播图切换方法
const switchBanner = (index) => {
  currentBannerIndex.value = index;
};

// 排序逻辑
const filteredMerchants = computed(() => {
  const sorted = [...merchantData.value];
  if (currentSort.value === 'comprehensive') {
    switch(currentComprehensiveOption.value) {
      case 'distance': return sorted.sort((a, b) => a.distance - b.distance);
      case 'minPrice': return sorted.sort((a, b) => a.minOrder - b.minOrder);
      case 'deliveryFee': return sorted.sort((a, b) => a.deliveryFee - b.deliveryFee);
      case 'highPrice': return sorted.sort((a, b) => b.avgPrice - a.avgPrice);
      case 'lowPrice': return sorted.sort((a, b) => a.avgPrice - b.avgPrice);
    }
  } else if (currentSort.value === 'sales') {
    return sorted.sort((a, b) => b.monthSales - a.monthSales);
  } else if (currentSort.value === 'speed') {
    return sorted.sort((a, b) => a.duration - b.duration);
  }
  return sorted;
});

// 交互逻辑
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
};

const selectComprehensiveOption = (option) => {
  currentComprehensiveOption.value = option.value;
  startSorting();
  toggleDropdown();
};

const startSorting = () => {
  isSorting.value = true;
  
  // 首次排序后永久隐藏轮播图
  if (!hasSorted.value) {
    hasSorted.value = true;
  }
  
  setTimeout(() => {
    isSorting.value = false;
    isSalesRefreshing.value = false;
    isSpeedRefreshing.value = false;
  }, 1000); // 模拟加载延迟
};

const sortBySales = () => {
  currentSort.value = 'sales';
  isSalesRefreshing.value = true;
  startSorting();
};

const sortBySpeed = () => {
  currentSort.value = 'speed';
  isSpeedRefreshing.value = true;
  startSorting();
};

// 点击空白关闭下拉
const closeDropdown = (e) => {
  const target = e.target;
  if (!target.closest('.sort-item.dropdown')) {
    isDropdownOpen.value = false;
  }
};

watch(isDropdownOpen, (val) => {
  if (val) {
    document.addEventListener('click', closeDropdown);
  } else {
    document.removeEventListener('click', closeDropdown);
  }
});

// 导航方法
const handleBack = () => {
  console.log('返回上一页');
};

const handleSwitchAddress = () => {
  console.log('切换地址');
};

// 搜索
const searchSearch = () => {
  if (!searchQuery.value.trim()) {
    searchQuery.value = currentPlaceholder.value; // 如果搜索框为空，使用当前轮播的占位符
  }
  // 跳转下一页
  router.push({
    name: 'ProductDetail', 
    params: { id: '1' } 
  });
};
// 返回上一页
const goBack = () => {
  router.back();
};
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', sans-serif;
}

/* 头部样式 */
.page-header {
  display: flex;
  padding: 18px 20px;
  align-items: center;
  border-bottom: 1px solid #F5F5F5;
  background: #FFF;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search-wrap {
  flex: 1;
  margin: 0 16px;
}

.search-input {
  width: 600px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #EEE;
  border-radius: 22px;
  font-size: 16px;
  outline: none;
}

.switch-address {
  color: #000;
  font-size: 16px;
  cursor: pointer;
}

/* 轮播图样式 */
.banner-container {
  height: 240px; /* 增加高度避免遮挡导航点 */
  margin: 24px 16px;
  overflow: hidden;
  border-radius: 16px;
  position: relative; /* 新增：定位导航点 */
  transition: all 0.3s ease;
}

.fade-out {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
}

.banner-list {
  display: flex;
  height: 100%;
}

.banner-item {
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.banner-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 24px 20px 20px;
  color: white;
}

.desc-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.desc-sub {
  font-size: 18px;
  color: #eee;
  margin-bottom: 4px;
}

.desc-price {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.desc-price > span:first-child {
  font-size: 18px;
  font-weight: bold;
  margin-right: 8px;
}

.desc-price > span:last-child {
  font-size: 12px;
  text-decoration: line-through;
}

.grab-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: #FF4500;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
}

/* 新增：轮播图导航指示器样式 */
.banner-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  width: 16px;
  border-radius: 4px;
}

/* 加载提示样式，居中显示不遮盖页面 */
.loading-tip {
  position: fixed;
  top: 53%;
  left: 53%;
  transform: translate(-50%, -50%);
  z-index: 50;
}

.loading-content {
  background-color: rgba(128, 128, 128, 0.5);
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.loading-img {
  width: 34px;
  height: 34px;
}

.loading-text {
  font-size: 14px;
  color: #333;
}

/* 排序栏样式 */
.sort-bar {
  display: flex;
  padding: 16px 20px;
  border-bottom: 1px solid #F5F5F5;
  background: white;
  transition: all 0.3s ease;
}

.sticky-top {
  position: fixed;
  top: 72px; /* 头部高度 */
  left: 0;
  right: 0;
  z-index: 40;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sort-item {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  position: relative;
  font-weight: 600;
}

.sort-item.active {
  color: #f79d00;
  font-weight: 600;
}

.dropdown {
  position: relative;
}
.dropdown.active {
  color: #f79d00;
}
.dropdown-icon {
  margin-left: 4px;
  font-size: 12px;
}

.dropdown-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  background: white;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  padding: 8px 0;
}

.dropdown-item {
  padding: 10px 16px;
  text-align: left;
  cursor: pointer;
}

.dropdown-item:hover {
  background: #F5F5F5;
}

.dropdown-item.active {
  color: #f79d00;
  font-weight: 500;
}

/* 商家列表样式 */
.merchant-list {
  padding: 16px 0;
  width: 100%;
  transition: all 0.3s ease;
}

/* 商家卡片动画 */
.fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.refreshing {
  animation: refresh 0.5s ease-in-out;
}

@keyframes refresh {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 商家卡片样式 */
.merchant-card {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: white;
  position: relative;
  width: 749.78px;
}

.tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #FF4500;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px 0 4px 0;
  z-index: 1;
}

.merchant-info {
  display: flex;
  padding: 16px;
}

.merchant-left {
  width: 100px;
  height: 100px;
  margin-right: 12px;
}

.merchant-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.merchant-right {
  flex: 1;
}

.merchant-name-rating {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.name {
  font-size: 25px;
  font-weight: 500;
  color: #333;
  font-weight: 700;
}

.rating {
  font-size: 18px;
  color: #FF9500;
}

.merchant-sales {
  font-size: 18px;
  color: #666;
  margin-bottom: 6px;
}

.merchant-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  font-size: 15px;
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.tag-item:nth-child(odd) {
  background: #FFF0F0;
  color: #FF4500;
}

.tag-item:nth-child(even) {
  background: #F0F8FF;
  color: #4A90E2;
}
.goods-list {
  display: flex;
  padding: 0 16px 16px;
  margin-top: 16px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: 18vw;
  /* 平滑滚动 */
  scroll-behavior: smooth;
  
  /* 隐藏滚动条但保留功能 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* 隐藏滚动条 */
.goods-list::-webkit-scrollbar {
  display: none;
}

.goods-item {
  margin-right: 16px;
  min-width: 160px; /* 增大卡片宽度 */
  flex-shrink: 0; /* 防止卡片被压缩 */
  transition: transform 0.2s ease;
}

/* 鼠标悬停效果 */
.goods-item:hover {
  transform: translateY(-4px);
}

.goods-img {
  width: 160px;
  height: 120px;
  margin-right: 0;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-sizing: border-box;
  object-fit: cover;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.goods-info {
  padding: 8px;
}

.goods-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.goods-price {
  font-size: 16px;
  color: #FF4500;
  font-weight: 600;
}

/* 可选：添加"查看更多"卡片 */
.more-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  border-radius: 8px;
  color: #999;
  font-size: 21px;
  cursor: pointer;
  font-weight: 700;
}
.goods-name {
  font-size: 18px;
  color: #333;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goods-price {
  font-size: 12px;
  color: #FF4500;
  font-weight: 500;
}

.discount {
  font-size: 10px;
  color: #666;
  font-weight: normal;
  margin-left: 4px;
}
@font-face {
  font-family: 'iconfont';
  src: url('iconfont.ttf?t=1749735311523') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 31px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
